<template>
  <!-- 教师密码设置组件 -->
  <div>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-position="right"
      label-width="150px"
    >
      <!-- 原密码 -->
      <el-form-item label="原密码" prop="originalPassword">
        <el-input
          type="password"
          showPassword
          v-model="form.originalPassword"
          style="width: 300px"
        >
        </el-input>
      </el-form-item>
      <!-- 新密码 -->
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          type="password"
          showPassword
          v-model="form.newPassword"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <!-- 确认新密码 -->
      <el-form-item label="确认新密码" prop="checkNewPassword">
        <el-input
          type="password"
          showPassword
          v-model="form.checkNewPassword"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <!-- 按钮区 -->
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import service from "@/utils/service";

export default {
  data() {
    return {
      //密码表单
      form: {
        originalPassword: "",
        newPassword: "",
        checkNewPassword: "",
      },
      //密码验证规则
      rules: {
        originalPassword: [
          {required: true, message: "请输入原密码", trigger: "blur"},
        ],
        newPassword: [{validator: this.validateNewPassword, trigger: "blur"}],
        checkNewPassword: [
          {validator: this.validateCheckNewPassword, trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    //新密码的验证器
    validateNewPassword(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.form.checkNewPassword !== "") {
          this.$refs.form.validateField("checkNewPassword");
        }

        callback();
      }
    },
    //确认新密码的验证器
    validateCheckNewPassword(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.form.newPassword) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
    //保存按钮对应的操作,即提交修改密码的请求
    async handleSave() {
      try {
        const apiUrl = "/teachers/currentTeacherModifyPassword";
        const response = await service.put(apiUrl, this.form, {
          headers: {
            Authorization: this.$store.state.token,
          },
        });

        if (response.data.code === 20031) {
          this.$message.success("修改成功");
          this.$refs.form.resetFields();
          // 在密码修改成功后等待一秒钟，然后刷新页面
          setTimeout(() => {
            window.location.reload();
          }, 1000); // 1000毫秒 = 1秒
        } else {
          this.$message.error('修改失败，请重试');
        }
      } catch {
        console.log("当前教师修改密码出错");
      }
    },
    //取消按钮对应的方法
    handleCancel() {
      this.$refs.form.resetFields();
    }
  },
};
</script>

<style>
</style>
